<template>
  <view class="mine">
    <view class="custom" :style="'top:' + customTop + 'px'">
      <text>{{tabbarName}}</text>
    </view>
    <view class="main">
      <view class="header" :style="'padding-top:' + titleHeight + 'px'"></view>
    </view>
    <view v-show="tabbarName === '接单大厅'">
      <One ref="oneRef" />
    </view>
    <view v-show="tabbarName === '打手中心'">
      <Three ref="threeRef" />
    </view>
    <!-- 授权弹窗 -->
    <s-auth-modal />
    <u-tabbar :value="tabbarName" activeColor="#FA1519" :placeholder="false" @change="changeTab" :fixed="true" :safeAreaInsetBottom="false">
      <u-tabbar-item text="接单大厅" icon="coupon" name="接单大厅"></u-tabbar-item>
      <u-tabbar-item text="打手中心" icon="account" name="打手中心"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
import One from "@/pages/examiners/one.vue";
import Two from "@/pages/examiners/two.vue";
import Three from "@/pages/examiners/three.vue";
import { getByKeyApi, getUnReadApi } from "@/sheep/api/index";
export default {
  components: {
    One,
    Two,
    Three,
  },
  data() {
    return {
      tabbarName: "打手中心",
      titleHeight: 0,
      customTop: 0,
      dot: false,
    };
  },
  onLoad() {
    this.getHeight();
    this.$refs.threeRef.onShowAll();
  },
  onShow() {
  },
  methods: {
    changeTab(name) {
      this.tabbarName = name;
      if (this.tabbarName == "接单大厅") {
        this.$refs.oneRef.onShowAll();
      } else if (this.tabbarName == "消息") {
        this.$refs.twoRef.onShowAll();
      } else if (this.tabbarName == "打手中心") {
        this.$refs.threeRef.onShowAll();
      }
    },
    /** 循环请求消息接口 */
    async getMessage() {
      let res = await getUnReadApi();
      if (res.data) {
        this.dot = true;
        // 清除定时器
        clearInterval(this.timer);
      } else {
        // 清空红点
        this.dot = false;
      }
    },
    // 获取微信右上角胶囊高度
    getHeight() {
      let res = uni.getMenuButtonBoundingClientRect();
      this.titleHeight = res.top + 10;
      this.customTop = res.top + 3;
    },
  },
};
</script>

<style lang="scss" scoped>
.mine {
  background-color: #f5f5f5;
  height: 100vh;
  position: relative;
  .custom {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 40rpx;
    font-weight: bolder;
    display: flex;
    align-items: center;
    z-index: 1;
  }
  .main {
    padding: 0 10rpx;
    .header {
      display: flex;
      padding: 42rpx 0;
      color: #fff;
      justify-content: space-between;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/minebg.png")
          no-repeat;
        background-size: 100% auto;
      }
    }
  }
  .index {
    padding: 30rpx;
    position: relative;
    z-index: 99;
    .info {
      font-size: 24rpx;
      color: #999999;
      display: flex;
      align-items: center;
    }
    .avatar {
      padding: 30rpx;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 20rpx;
      .avatar-box {
        height: 50%;
        display: flex;
        margin-bottom: 20rpx;
        .userId {
          margin-left: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .phonenumber {
            display: flex;
            align-items: center;
            font-weight: 700;
          }
        }
      }
    }
    .order {
      margin-top: 30rpx;
      padding: 30rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .kefu {
        margin: 20rpx 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .kefu-left {
          display: flex;
          align-items: center;
          font-size: 30rpx;
        }
      }
    }
    .title {
      font-size: 30rpx;
      font-weight: 700;
      margin-bottom: 20rpx;
    }
    .grid-text {
      margin: 16rpx 0;
      font-size: 24rpx;
    }
  }
  .qrcode {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .phone {
      display: flex;
      align-items: center;
    }
    .desc {
      font-size: 24rpx;
      color: #999999;
      margin-top: 10rpx;
    }
  }
}
::v-deep .u-modal__content {
  display: unset !important;
}
</style>
